<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<div th:fragment="page">

    <script type="text/javascript" th:src="@{../../static/js/jquery.paginate.js}"></script>
    <script th:inline="javascript">
        (function ($) {
            /*<![CDATA[*/
            var count = [[${page.pageCount}]];
            var start = [[${page.pageIndex}]];
            /*]]>*/
            var url = $("#page").attr('url');
            var displaycnt = count > 10 ? 10 : count;
            fenye(count, start, url, displaycnt);
        })(jQuery);

        function fenye(count, start, url, displaycnt) {
            if (count < 2){
                return ;
            }
            $("#page").paginate({
                count: count,
                start: start,
                display: displaycnt,
                border					: true,
                border_color			: '#fff',
                text_color  			: 'black',
                background_color    	: 'none',
                border_hover_color		: '#ccc',
                text_hover_color  		: '#000',
                background_hover_color	: '#fff',
                images					: false,
                mouse					: 'press',
                onChange: function (page_index) {
                    var tourl;
                    /*<![CDATA[*/
                    if (url.indexOf('?') > 0)
                        tourl = url + '&pageIndex=' + page_index;
                    else
                        tourl = url + '?pageIndex=' + page_index;
                    window.location.href = tourl;
                    /*]]>*/
                }
            });
        };
    </script>

</div>
</html>